<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" type="image/png" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <title>洛² - 聊天</title>
    <style>
        body {
            background: linear-gradient(to bottom, #333, #000);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .login-container {
            width: 95%;
            max-width: 400px;
            background: linear-gradient(145deg, #2c3e50, #34495e);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            padding: 30px;
            color: white;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: fadeInUp 0.6s ease-out;
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
            animation: logoFloat 3s ease-in-out infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .logo-image {
            width: 120px;
            height: 120px;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            animation: logoGlow 2s ease-in-out infinite alternate;
        }

        .logo h1 {
            font-size: 48px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #3498db, #2ecc71);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
            letter-spacing: 2px;
        }

        .logo p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            margin: 5px 0 0;
            letter-spacing: 1px;
        }

        @keyframes logoGlow {
            from {
                box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
            }
            to {
                box-shadow: 0 0 30px rgba(46, 204, 113, 0.4);
            }
        }

        @keyframes logoFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
            animation: slideIn 0.5s ease-out backwards;
        }

        .form-group:nth-child(1) { animation-delay: 0.2s; }
        .form-group:nth-child(2) { animation-delay: 0.3s; }
        .form-group:nth-child(3) { animation-delay: 0.4s; }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .auth-button {
            animation: fadeIn 0.5s ease-out backwards;
            animation-delay: 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .tab {
            transition: all 0.3s ease;
        }

        .tab.active {
            animation: tabActive 0.3s ease-out;
        }

        @keyframes tabActive {
            0% {
                transform: scale(0.95);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        .chat-container {
            width: 95%;
            max-width: 1000px;
            height: 80vh;
            background: linear-gradient(to right, #444, #222);
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
        }

        .chat-container.fullscreen {
            width: 100%;
            height: 100vh;
            max-width: none;
            border-radius: 0;
        }

        .top-bar {
            background: linear-gradient(to right, #333, #222);
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            border-bottom: 1px solid #444;
        }

        .top-bar h1 {
            margin: 0;
            font-size: 20px;
        }

        .top-bar .toggle-users {
            display: none;
            padding: 8px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
            border-radius: 50%;
        }

        @media (max-width: 768px) {
            .top-bar .toggle-users {
                display: flex;
            }
        }

        .top-bar .toggle-users:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .top-bar .toggle-users svg {
            width: 24px;
            height: 24px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-button {
            background: none;
            color: white;
            border: none;
            outline: none;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: background 0.2s;
        }

        .dropdown-button:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .dropdown-button::after {
            content: '▼';
            font-size: 10px;
            margin-left: 5px;
            transition: transform 0.2s;
        }

        .dropdown-button.active::after {
            transform: rotate(180deg);
        }

        .dropdown-content {
            position: absolute;
            right: 0;
            top: 100%;
            background: #2c3e50;
            min-width: 160px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            border-radius: 4px;
            padding: 5px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s;
            z-index: 1000;
        }

        .dropdown-content.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-content a {
            color: white;
            padding: 10px 15px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s;
            font-size: 14px;
            cursor: pointer;
        }

        .dropdown-content a:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .dropdown-content a i {
            font-size: 16px;
            opacity: 0.8;
        }

        .content-area {
            display: flex;
            flex: 1;
            min-height: 0;
            position: relative;
        }

        .online-users {
            width: 25%;
            padding: 20px;
            color: white;
            border-right: 1px solid #555;
            overflow-y: auto;
            background: #222;
            height: 100%;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        .online-users.hidden {
            transform: translateX(-100%);
            position: absolute;
            z-index: 1;
        }

        .online-users h3 {
            margin-bottom: 10px;
            font-size: 16px;
            color: #fff;
        }

        .user-item {
            padding: 10px;
            border-bottom: 1px solid #555;
            background: #333;
            border-radius: 5px;
            margin-bottom: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .user-item:hover {
            background: #444;
        }

        .chat-messages {
            width: 75%;
            padding: 20px;
            color: white;
            overflow-y: auto;
            background-color: #1a1a1a;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
            position: relative;
        }

        .chat-messages.full-width {
            width: 100%;
        }

        .message {
            margin-bottom: 10px;
            padding: 10px 15px;
            border-radius: 15px;
            position: relative;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
            max-width: 85%;
        }

        .message.chat {
            background-color: #2c3e50;
            align-self: flex-start;
            margin-left: 10px;
            border-bottom-left-radius: 5px;
        }

        .message.chat.self {
            background-color: #2980b9;
            align-self: flex-end;
            margin-right: 10px;
            border-bottom-right-radius: 5px;
            margin-left: 0;
        }

        .message.system {
            background: rgba(52, 73, 94, 0.4);
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            max-width: 100%;
            margin: 8px 0;
            padding: 6px 15px;
            font-size: 12px;
            border-radius: 4px;
            align-self: center;
            width: auto;
            min-width: 150px;
        }

        .message.system.join,
        .message.system.leave {
            background: none;
            color: rgba(255, 255, 255, 0.5);
            padding: 4px 10px;
            margin: 4px 0;
            font-size: 11px;
            min-width: 0;
        }

        .message.system::before,
        .message.system::after {
            display: none;
        }

        .message.private {
            background: linear-gradient(135deg, #34495e, #2c3e50);
            border-left: 4px solid #e74c3c;
            align-self: flex-start;
            margin-left: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .message .username {
            font-weight: 600;
            color: #3498db;
            margin-right: 8px;
            font-size: 13px;
        }

        .message.self .username {
            color: #fff;
        }

        .message .timestamp {
            font-size: 11px;
            color: rgba(255,255,255,0.6);
            margin-left: 5px;
        }

        .message .content {
            margin-top: 4px;
            color: #fff;
            font-size: 14px;
        }

        .message.chat .meta,
        .message.private .meta {
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            opacity: 0.8;
        }

        .message-input {
            height: 60px;
            background: #333;
            display: flex;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            position: relative;
        }

        .message-input input {
            width: 85%;
            height: 100%;
            background: #444;
            border: 1px solid #555;
            border-radius: 25px;
            outline: none;
            color: white;
            font-size: 16px;
            padding: 0 20px;
            transition: background 0.3s;
        }

        .message-input input:focus {
            background: #555;
            border-color: #777;
        }

        .message-input button {
            width: 12%;
            height: 100%;
            background: linear-gradient(to right, #555, #333);
            border: none;
            cursor: pointer;
            transition: background 0.3s;
            border-radius: 25px;
            margin-left: 10px;
            color: white;
            font-weight: bold;
        }

        .message-input button:hover {
            background: linear-gradient(to right, #777, #555);
        }

        /* 登录表单样式 */
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            position: relative;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.2);
            padding: 5px;
        }

        .tab {
            padding: 12px 30px;
            border: none;
            background: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            border-radius: 8px;
            width: 50%;
            z-index: 1;
        }

        .tab.active {
            color: #fff;
            background: rgba(52, 152, 219, 0.2);
        }

        .tab:hover:not(.active) {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.1);
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group input {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.2);
            color: white;
            font-size: 15px;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .form-group input:focus {
            border-color: #3498db;
            background: rgba(0, 0, 0, 0.3);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .form-group input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        /* 错误消息样式 */
        .error {
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.1);
            padding: 12px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 14px;
            border: 1px solid rgba(231, 76, 60, 0.2);
            display: none;
        }

        .error:not(:empty) {
            display: block;
        }

        /* 登录按钮样式 */
        .auth-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }

        .auth-button:hover {
            background: linear-gradient(135deg, #2980b9, #2573a7);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
        }

        .auth-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(52, 152, 219, 0.4);
        }

        .auth-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .auth-button:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(100, 100);
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            .login-container {
                width: 90%;
                padding: 25px;
                margin: 20px auto;
            }

            .tab {
                padding: 10px 20px;
                font-size: 14px;
            }

            .form-group input {
                padding: 12px 15px;
                font-size: 14px;
            }

            .auth-button {
                padding: 12px;
                font-size: 15px;
            }
        }

        @media (max-width: 768px) {
            body {
                margin: 0;
                padding: 0;
                height: 100vh;
                width: 100vw;
                overflow: hidden;
            }

            .chat-container {
                height: 100vh;
                width: 100vw;
                margin: 0;
                border-radius: 0;
            }

            .content-area {
                height: calc(100vh - 120px);
            }

            .online-users {
                position: fixed;
                bottom: 60px;
                left: 0;
                width: 100%;
                height: 50vh;
                transform: translateY(100%);
                border-right: none;
                border-top: 1px solid #555;
                z-index: 10;
                background: #222;
            }

            .online-users.show {
                transform: translateY(0);
            }

            .chat-messages {
                width: 100%;
                height: calc(100vh - 120px);
                padding-bottom: 60px;
            }

            .message-input {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 10px;
                background: #222;
                z-index: 11;
            }

            .top-bar {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 12;
            }

            .login-container {
                width: 90%;
                max-width: none;
                margin: 20px auto;
                height: auto;
            }
        }

        /* 私聊遮罩和窗口样式 */
        .private-chat-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
            display: none;
            z-index: 999;
        }

        .private-chat {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 400px;
            height: 80vh;
            max-height: 500px;
            background: linear-gradient(to right, #444, #222);
            border-radius: 15px;
            display: none;
            flex-direction: column;
            overflow: hidden;
            z-index: 1000;
        }

        .private-chat-overlay.show {
            opacity: 1;
        }

        .private-chat.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .private-chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .private-chat-header .close {
            cursor: pointer;
            font-size: 24px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s;
            user-select: none;
        }

        .private-chat-header .close:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .private-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            color: #333;
        }

        .private-chat-input {
            padding: 10px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 10px;
        }

        .private-chat-input input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #333;
        }

        .private-chat-input button {
            padding: 8px 15px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .private-chat-input button:hover {
            background: #0056b3;
        }

        .user-item {
            position: relative;
        }

        .unread-badge {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .user-actions {
            position: absolute;
            right: 35px;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }

        .user-item:hover .user-actions {
            display: flex;
            gap: 5px;
        }

        .user-actions button {
            padding: 3px 8px;
            background: #2c3e50;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 12px;
        }

        .emoji-picker {
            position: absolute;
            bottom: 45px;
            left: 10px;
            background: #333;
            border-radius: 8px;
            padding: 10px;
            display: none;
            grid-template-columns: repeat(8, 1fr);
            gap: 5px;
            max-width: 240px;
        }

        .emoji-picker.active {
            display: grid;
        }

        .emoji-picker span {
            cursor: pointer;
            padding: 5px;
            text-align: center;
            border-radius: 4px;
        }

        .emoji-picker span:hover {
            background: #444;
        }

        .message.recalled {
            font-style: italic;
            color: rgba(255,255,255,0.5);
        }

        .message .recall-btn {
            display: none;
            font-size: 12px;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            margin-left: 10px;
        }

        .message:hover .recall-btn {
            display: inline;
        }

        /* 修复在线用户列表的滚动问题 */
        .online-users::-webkit-scrollbar {
            width: 6px;
        }

        .online-users::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }

        .online-users::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }

        .online-users::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* 加载动画容器 */
        .loading-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .loading-container.show {
            display: flex;
        }

        /* 加载动画 */
        .loading-spinner {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: spin 2s linear infinite;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .loading-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            animation: pulse 1.5s ease-in-out infinite;
        }

        .loading-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            animation: pulse 1.5s ease-in-out infinite;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 0.5;
                transform: scale(0.95);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 移动端样式优化 */
        @media (max-width: 768px) {
            .chat-container {
                width: 100vw;
                height: 100vh;
                margin: 0;
                border-radius: 0;
                display: flex;
                flex-direction: column;
            }

            .content-area {
                flex: 1;
                height: calc(100vh - 60px);
                position: relative;
                overflow: hidden;
            }

            .chat-messages {
                width: 100%;
                height: calc(100vh - 120px);
                padding-bottom: 70px;
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .message-input {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 10px;
                background: #222;
                z-index: 11;
                height: 60px;
                box-sizing: border-box;
            }

            /* 优化消息显示区域的滚动 */
            .chat-messages::-webkit-scrollbar {
                width: 4px;
            }

            .chat-messages::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.1);
            }

            .chat-messages::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.2);
                border-radius: 2px;
            }

            /* 确保最后一条消息不会被输入框遮挡 */
            .message:last-child {
                margin-bottom: 60px;
            }

            /* 优化输入框样式 */
            .message-input input {
                height: 40px;
                font-size: 16px;
            }

            .message-input button {
                height: 40px;
            }
        }

        /* 移动端登录界面优化 */
        @media (max-width: 768px) {
            body {
                background: linear-gradient(to bottom, #333, #000);
                height: 100vh;
                margin: 0;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .login-container {
                width: 100%;
                height: 100%;
                max-width: none;
                margin: 0;
                padding: 20px;
                border-radius: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                background: linear-gradient(145deg, #2c3e50dd, #34495edd);
            }

            .logo {
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                gap: 20px;
                margin: 20px 0 30px;
                padding: 0 20px;
            }

            .logo-image {
                width: 60px;
                height: 60px;
                border-radius: 15px;
                flex-shrink: 0;
            }

            .logo-text {
                text-align: left;
            }

            .logo h1 {
                font-size: 32px;
                margin: 0;
            }

            .logo p {
                font-size: 12px;
                margin: 5px 0 0;
                opacity: 0.8;
            }

            /* 横屏优化 */
            @media (orientation: landscape) {
                .logo {
                    margin: 10px 0 20px;
                }

                .logo-image {
                    width: 50px;
                    height: 50px;
                }

                .logo h1 {
                    font-size: 28px;
                }

                .logo p {
                    font-size: 11px;
                }
            }

            .tabs {
                margin: 0 auto 30px;
                width: 90%;
                max-width: 300px;
            }

            .tab {
                padding: 12px 0;
                font-size: 16px;
            }

            #loginForm, #registerForm {
                width: 90%;
                max-width: 300px;
                margin: 0 auto;
            }

            .form-group {
                margin-bottom: 15px;
            }

            .form-group input {
                width: 100%;
                height: 45px;
                padding: 0 15px;
                font-size: 16px;
                border-radius: 10px;
            }

            .auth-button {
                height: 45px;
                font-size: 16px;
                margin-top: 20px;
            }

            .error {
                margin-top: 10px;
                padding: 10px;
                font-size: 14px;
                text-align: center;
            }

            /* 修复软键盘弹出时的布局问题 */
            @media (max-height: 600px) {
                .login-container {
                    justify-content: flex-start;
                    padding-top: 20px;
                }

                .logo {
                    margin-bottom: 20px;
                }

                .logo-image {
                    width: 60px;
                    height: 60px;
                }

                .logo h1 {
                    font-size: 28px;
                }

                .tabs {
                    margin-bottom: 20px;
                }
            }

            /* 横屏优化 */
            @media (orientation: landscape) {
                .login-container {
                    padding: 10px 20px;
                }

                .logo {
                    margin-bottom: 20px;
                }

                .logo-image {
                    width: 60px;
                    height: 60px;
                }

                .logo h1 {
                    font-size: 28px;
                    margin: 5px 0;
                }

                .form-group {
                    margin-bottom: 10px;
                }

                .form-group input {
                    height: 40px;
                }

                .auth-button {
                    height: 40px;
                    margin-top: 15px;
                }
            }
        }

        /* 添加显示类 */
        .private-chat-overlay.show {
            display: block;
            opacity: 1;
        }

        .private-chat.show {
            display: flex;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* 确保私聊窗口中的 message-input 样式正确 */
        .private-chat .message-input {
            padding: 10px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="loginArea" class="login-container">
        <div class="logo">
            <img src="/static/Luo2Icon-mini.png" alt="洛²" class="logo-image">
            <div class="logo-text">
                <h1>洛²</h1>
                <p>又一个洛²搭建的聊天室</p>
            </div>
        </div>
        <div class="tabs">
            <button class="tab active" onclick="switchTab('login')">登录</button>
            <button class="tab" onclick="switchTab('register')">注册</button>
        </div>
        <div id="loginForm">
            <div class="form-group">
                <input type="text" id="loginUsername" placeholder="用户名" autocomplete="username">
            </div>
            <div class="form-group">
                <input type="password" id="loginPassword" placeholder="密码" autocomplete="current-password">
            </div>
            <button onclick="login()" class="auth-button">登录</button>
            <div id="loginError" class="error"></div>
        </div>
        <div id="registerForm" style="display: none;">
            <div class="form-group">
                <input type="text" id="registerUsername" placeholder="用户名" autocomplete="username">
            </div>
            <div class="form-group">
                <input type="password" id="registerPassword" placeholder="密码" autocomplete="new-password">
            </div>
            <div class="form-group">
                <input type="password" id="confirmPassword" placeholder="确认密码" autocomplete="new-password">
            </div>
            <button onclick="register()" class="auth-button">注册</button>
            <div id="registerError" class="error"></div>
        </div>
    </div>

    <div id="chatArea" class="chat-container" style="display: none;">
        <div class="top-bar">
            <h1>洛²</h1>
            <button class="toggle-users" onclick="toggleUserList()">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path d="M782 964.1c-17.7 0-32.1-14.4-32.1-32.1 0-189.1-153.8-342.9-342.9-342.9S64.2 743 64.2 932.1c0 17.7-14.4 32.1-32.1 32.1C14.4 964.1 0 949.8 0 932.1c0-54.9 10.8-108.2 32-158.4 20.5-48.5 49.8-92 87.2-129.4s80.9-66.7 129.4-87.2c50.2-21.2 103.5-32 158.4-32s108.2 10.8 158.4 32c48.5 20.5 92 49.8 129.4 87.2s66.7 80.9 87.2 129.4c21.2 50.2 32 103.5 32 158.4 0 17.7-14.3 32-32 32zM720.3 572.8c-13.3 0-25.8-8.4-30.4-21.7-5.7-16.8 3.2-35 20-40.7 83.7-28.6 137.8-96.7 137.8-173.4 0-87.9-73.3-164.8-174.2-182.8-17.4-3.1-29.1-19.8-26-37.2s19.8-29.1 37.2-26c62.6 11.2 119.7 41.2 160.9 84.7 42.7 45 66.2 102.3 66.2 161.3 0 52.2-17.9 102.2-51.7 144.7-32.4 40.7-77.2 71.6-129.5 89.5-3.4 1.1-6.9 1.6-10.3 1.6z" fill="#ffffff"></path>
                    <path d="M991.9 889.4c-17.7 0-32.1-14.4-32.1-32.1 0-151.9-123.6-275.4-275.4-275.4-17.7 0-32.1-14.4-32.1-32.1s14.4-32.1 32.1-32.1c45.8 0 90.3 9 132.2 26.7 40.4 17.1 76.8 41.6 107.9 72.8 31.2 31.2 55.7 67.5 72.8 107.9 17.7 41.9 26.7 86.4 26.7 132.2 0 17.7-14.4 32.1-32.1 32.1zM407 129.1c52.9 0 102.6 20.6 140 58 37.4 37.4 58 87.1 58 140s-20.6 102.6-58 140c-37.4 37.4-87.1 58-140 58s-102.6-20.6-140-58-58-87.1-58-140 20.6-102.6 58-140 87.1-58 140-58m0-64c-144.7 0-262 117.3-262 262s117.3 262 262 262 262-117.3 262-262-117.3-262-262-262z" fill="#ffffff"></path>
                </svg>
            </button>
            <span>欢迎, <span id="currentUser"></span></span>
            <div class="dropdown">
                <button class="dropdown-button" onclick="toggleDropdown(event)">
                    设置
                </button>
                <div class="dropdown-content" id="settingsDropdown">
                    <a onclick="toggleFullscreen()">
                        <i>🖥️</i>
                        <span id="fullscreenText">切换全屏</span>
                    </a>
                    <a href="#" onclick="logout()">
                        <i>🚪</i>
                        退出登录
                    </a>
                </div>
            </div>
        </div>
        <div class="content-area">
            <div class="online-users">
                <h3>在线用户</h3>
                <div id="userList"></div>
            </div>
            <div id="chatBox" class="chat-messages">
                <div class="loading-container">
                    <div class="loading-spinner">
                        <img src="/static/Luo2Icon-mini.png" alt="洛²" class="loading-image">
                    </div>
                    <div class="loading-text">正在加载消息...</div>
                </div>
            </div>
        </div>
        <div class="message-input">
            <input type="text" id="messageInput" placeholder="输入消息..." onkeypress="handleKeyPress(event)">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <div class="private-chat-overlay" id="privateChatOverlay"></div>

    <div class="private-chat" id="privateChat">
        <div class="private-chat-header">
            <span id="privateChatTarget"></span>
            <div class="close" onclick="closePrivateChat()">×</div>
        </div>
        <div class="private-chat-messages" id="privateChatMessages"></div>
        <div class="message-input">
            <input type="text" id="privateMessageInput" placeholder="输入私聊消息...">
            <button onclick="sendPrivateMessage()">发送</button>
        </div>
    </div>

    <audio id="messageSound" src="/static/message.mp3"></audio>

    <script>
        let ws = null;
        let currentToken = null;
        let lastMessageTime = 0;
        let currentPrivateChatTarget = null;
        let unreadMessages = {};
        const messageSound = document.getElementById('messageSound');
        const onlineUsers = new Set();
        let config = null;

        // 获取配置的函数
        async function loadConfig() {
            try {
                const response = await fetch('/config');
                config = await response.json();
            } catch (error) {
                console.error('加载配置失败:', error);
                // 使用默认配置
                config = {
                    ws_domain: window.location.hostname,
                    api_domain: window.location.hostname,
                    ws_port: 8000,
                    api_port: 8001
                };
            }
        }

        // 修改 getApiBaseUrl 函数
        function getApiBaseUrl() {
            if (!config) return `http://${window.location.hostname}:8001`;
            return `http://${config.api_domain}:${config.api_port}`;
        }

        // 修改 WebSocket 连接函数
        function connectWebSocket() {
            showLoading();
            const wsUrl = config ? 
                `ws://${config.ws_domain}:${config.ws_port}` : 
                `ws://${window.location.hostname}:8000`;
            
            ws = new WebSocket(wsUrl);
            
            ws.onopen = () => {
                ws.send(JSON.stringify({
                    type: 'login',
                    token: currentToken
                }));
            };
            
            ws.onmessage = (event) => {
                const message = JSON.parse(event.data);
                hideLoading(); // 收到消息时隐藏加载动画
                
                if (message.type === 'system' && message.content.includes('加入了聊天室')) {
                    const username = message.content.split(' ')[0];
                    updateUserList(username, 'add');
                } else if (message.type === 'system' && message.content.includes('离开了聊天室')) {
                    const username = message.content.split(' ')[0];
                    updateUserList(username, 'remove');
                }
                
                displayMessage(message);
                
                if (message.type === 'chat' || message.type === 'private') {
                    playMessageSound();
                }
            };
            
            ws.onclose = () => {
                if (currentToken) {
                    showLoading(); // 断开连接时显示加载动画
                    setTimeout(connectWebSocket, 1000);
                }
            };

            ws.onerror = () => {
                showLoading(); // 连接错误时显示加载动画
            };
        }

        function updateUserList(username, action = 'add') {
            if (action === 'add') {
                onlineUsers.add(username);
            } else {
                onlineUsers.delete(username);
            }
            
            const userList = document.getElementById('userList');
            userList.innerHTML = '';
            onlineUsers.forEach(user => {
                const currentUser = document.getElementById('currentUser').textContent;
                if (user === currentUser) return; // 不显示自己
                
                const userItem = document.createElement('div');
                userItem.className = 'user-item';
                
                const unreadCount = unreadMessages[user] || 0;
                const badge = unreadCount ? `<div class="unread-badge">${unreadCount}</div>` : '';
                
                const actions = `
                    <div class="user-actions">
                        <button onclick="blockUser('${user}')">屏蔽</button>
                    </div>
                `;
                
                userItem.innerHTML = `
                    ${user}
                    ${actions}
                    ${badge}
                `;
                userItem.onclick = (e) => {
                    if (!e.target.matches('button')) {
                        startPrivateChat(user);
                    }
                };
                userList.appendChild(userItem);
            });
        }

        function startPrivateChat(username) {
            const currentUser = document.getElementById('currentUser').textContent;
            if (username === currentUser) {
                alert('不能给自己发送私信');
                return;
            }
            
            currentPrivateChatTarget = username;
            document.getElementById('privateChatTarget').textContent = username;
            
            // 直接设置显示
            document.getElementById('privateChat').style.display = 'flex';
            document.getElementById('privateChatOverlay').style.display = 'block';
            
            // 清空并重新加载消息
            const privateChatMessages = document.getElementById('privateChatMessages');
            privateChatMessages.innerHTML = '';
            
            // 加载历史私聊消息
            ws.send(JSON.stringify({
                type: 'load_private_history',
                with: username
            }));
            
            // 标记消息为已读
            if (unreadMessages[username]) {
                ws.send(JSON.stringify({
                    type: 'mark_read',
                    from: username
                }));
                unreadMessages[username] = 0;
                updateUserList(username, 'add');
            }
        }

        function closePrivateChat() {
            const privateChatWindow = document.getElementById('privateChat');
            const overlay = document.getElementById('privateChatOverlay');
            
            if (privateChatWindow && overlay) {
                privateChatWindow.style.display = 'none';
                overlay.style.display = 'none';
                currentPrivateChatTarget = null;
            }
        }

        function sendPrivateMessage() {
            const input = document.getElementById('privateMessageInput');
            const content = input.value.trim();
            
            if (content && ws && currentPrivateChatTarget) {
                ws.send(JSON.stringify({
                    type: 'private',
                    to: currentPrivateChatTarget,
                    content: content
                }));
                input.value = '';
            }
        }

        function handlePrivateKeyPress(event) {
            if (event.key === 'Enter') {
                sendPrivateMessage();
            }
        }

        function toggleEmojiPicker() {
            const picker = document.getElementById('emojiPicker');
            picker.classList.toggle('active');
        }

        function insertEmoji(emoji) {
            const input = document.getElementById('privateMessageInput');
            input.value += emoji;
            document.getElementById('emojiPicker').classList.remove('active');
        }

        function blockUser(username) {
            event.stopPropagation();
            if (confirm(`确定要屏蔽 ${username} 吗？`)) {
                ws.send(JSON.stringify({
                    type: 'block_user',
                    username: username
                }));
            }
        }

        function recallMessage(messageId) {
            ws.send(JSON.stringify({
                type: 'recall',
                message_id: messageId
            }));
        }

        function playMessageSound() {
            const now = Date.now();
            if (now - lastMessageTime > sToMs(1)) {  // 1秒内不重复播放
                messageSound.play();
                lastMessageTime = now;
            }
        }

        // s to ms
        function sToMs(s) {
            return s * 1000;
        }

        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelector(`.tab[onclick*="${tab}"]`).classList.add('active');
            document.getElementById('loginForm').style.display = tab === 'login' ? 'block' : 'none';
            document.getElementById('registerForm').style.display = tab === 'register' ? 'block' : 'none';
            document.getElementById('loginError').textContent = '';
            document.getElementById('registerError').textContent = '';
        }

        function register() {
            if (!validateRegisterForm()) return;
            
            const username = document.getElementById('registerUsername').value.trim();
            const password = document.getElementById('registerPassword').value.trim();
            
            showError('register', '正在注册...');
            document.getElementById('registerError').style.color = '#3498db';
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', `${getApiBaseUrl()}/api/auth/register`, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onload = function() {
                try {
                    const data = JSON.parse(xhr.responseText);
                    if (xhr.status === 200 && data.success) {
                        switchTab('login');
                        document.getElementById('loginUsername').value = username;
                        showError('login', '注册成功，请登录');
                        document.getElementById('loginError').style.color = '#4CAF50';
                    } else {
                        showError('register', data.error || '注册失败');
                    }
                } catch (e) {
                    showError('register', '注册失败，服务器响应异常');
                }
            };
            
            xhr.onerror = function() {
                showError('register', '注册失败，无法连接到服务器');
            };
            
            xhr.send(JSON.stringify({ username, password }));
        }

        function login() {
            if (!validateLoginForm()) return;
            
            const username = document.getElementById('loginUsername').value.trim();
            const password = document.getElementById('loginPassword').value.trim();
            
            showError('login', '正在登录...');
            document.getElementById('loginError').style.color = '#3498db';
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', `${getApiBaseUrl()}/api/auth/login`, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onload = function() {
                try {
                    const data = JSON.parse(xhr.responseText);
                    if (xhr.status === 200 && data.success) {
                        currentToken = data.token;
                        localStorage.setItem('token', data.token);
                        document.getElementById('currentUser').textContent = data.username;
                        document.getElementById('loginArea').style.display = 'none';
                        document.getElementById('chatArea').style.display = 'grid';
                        connectWebSocket();
                    } else {
                        showError('login', data.error || '登录失败');
                    }
                } catch (e) {
                    showError('login', '登录失败，服务器响应异常');
                }
            };
            
            xhr.onerror = function() {
                showError('login', '登录失败，无法连接到服务器');
            };
            
            xhr.send(JSON.stringify({ username, password }));
        }

        function logout() {
            if (currentToken) {
                fetch(`${getApiBaseUrl()}/api/auth/logout`, {
                    method: 'POST',
                    headers: {
                        'Authorization': currentToken
                    }
                })
                .then(() => {
                    if (ws) {
                        ws.close();
                    }
                    currentToken = null;
                    localStorage.removeItem('token');
                    document.getElementById('loginArea').style.display = 'block';
                    document.getElementById('chatArea').style.display = 'none';
                    document.getElementById('chatBox').innerHTML = '';
                    document.getElementById('loginUsername').value = '';
                    document.getElementById('loginPassword').value = '';
                    onlineUsers.clear();
                    document.getElementById('userList').innerHTML = '';
                });
            }
        }

        function displayMessage(message) {
            const chatBox = document.getElementById('chatBox');
            const messageDiv = document.createElement('div');
            const currentUser = document.getElementById('currentUser').textContent;
            
            if (message.type === 'chat') {
                messageDiv.className = `message ${message.type} ${message.username === currentUser ? 'self' : ''}`;
                messageDiv.innerHTML = `
                    <div class="meta">
                        <span class="username">${message.username}</span>
                        <span class="timestamp">${message.timestamp}</span>
                    </div>
                    <div class="content">${message.content}</div>
                `;
            } else if (message.type === 'private') {
                // 处理私聊消息
                const isPrivateChatOpen = currentPrivateChatTarget === (message.from === currentUser ? message.to : message.from);
                
                if (isPrivateChatOpen) {
                    const privateChatMessages = document.getElementById('privateChatMessages');
                    messageDiv.className = `message ${message.from === currentUser ? 'self' : ''}`;
                    messageDiv.innerHTML = `
                        <div class="meta">
                            <span class="username">${message.from}</span>
                            <span class="timestamp">${message.timestamp}</span>
                        </div>
                        <div class="content">${message.content}</div>
                    `;
                    privateChatMessages.appendChild(messageDiv);
                    privateChatMessages.scrollTop = privateChatMessages.scrollHeight;
                    
                    // 发送已读确认
                    ws.send(JSON.stringify({
                        type: 'mark_read',
                        from: message.from
                    }));
                } else {
                    // 更新未读消息计数并显示系统通知
                    if (message.from !== currentUser) {
                        unreadMessages[message.from] = (unreadMessages[message.from] || 0) + 1;
                        updateUserList(message.from, 'add');
                        showNotification(`${message.from}发来新消息`, message.content);
                    }
                }
                return;
            } else {
                // 系统消息
                const isJoinLeave = message.content.includes('加入了聊天室') || message.content.includes('离开了聊天室');
                messageDiv.className = `message ${message.type} ${isJoinLeave ? (message.content.includes('加入') ? 'join' : 'leave') : ''}`;
                messageDiv.innerHTML = message.content;
            }
            
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const content = input.value.trim();
            
            if (content && ws) {
                ws.send(JSON.stringify({
                    type: 'chat',
                    content: content
                }));
                input.value = '';
            }
        }

        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }

        // 页面加载时先获取配置
        document.addEventListener('DOMContentLoaded', async function() {
            await loadConfig();
            
            // 检查本地存储的登录状态
            const token = localStorage.getItem('token');
            if (token) {
                currentToken = token;
                fetch(`${getApiBaseUrl()}/api/user/info`, {
                    headers: {
                        'Authorization': token
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || '获取用户信息失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        document.getElementById('currentUser').textContent = data.username;
                        document.getElementById('loginArea').style.display = 'none';
                        document.getElementById('chatArea').style.display = 'grid';
                        connectWebSocket();
                    } else {
                        localStorage.removeItem('token');
                        throw new Error(data.error || '获取用户信息失败');
                    }
                })
                .catch(error => {
                    localStorage.removeItem('token');
                    console.error('获取用户信息失败:', error);
                });
            }
        });

        // 添加拖动功能的JavaScript
        function makeDraggable(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            element.querySelector('.private-chat-header').onmousedown = dragMouseDown;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                // 获取鼠标位置
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                // 计算新位置
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                // 设置元素新位置
                element.style.top = (element.offsetTop - pos2) + "px";
                element.style.left = (element.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        function toggleDropdown(event) {
            event.stopPropagation();
            const button = event.currentTarget;
            const dropdown = document.getElementById('settingsDropdown');
            button.classList.toggle('active');
            dropdown.classList.toggle('show');
        }

        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', function(event) {
            const dropdowns = document.getElementsByClassName('dropdown-content');
            const buttons = document.getElementsByClassName('dropdown-button');
            
            if (!event.target.matches('.dropdown-button')) {
                for (let dropdown of dropdowns) {
                    if (dropdown.classList.contains('show')) {
                        dropdown.classList.remove('show');
                    }
                }
                for (let button of buttons) {
                    if (button.classList.contains('active')) {
                        button.classList.remove('active');
                    }
                }
            }
        });

        function openPrivateChat(username) {
            if (username === currentPrivateChatTarget) {
                return;
            }
            
            currentPrivateChatTarget = username;
            const privateChatWindow = document.getElementById('privateChat');
            const overlay = document.getElementById('privateChatOverlay');
            
            if (!privateChatWindow) {
                createPrivateChatWindow(username);
            } else {
                document.querySelector('.private-chat-header .title').textContent = `与 ${username} 私聊中`;
                document.getElementById('privateChatMessages').innerHTML = '';
            }
            
            document.getElementById('privateChat').classList.add('active');
            overlay.classList.add('active');
        }

        function closePrivateChat() {
            const privateChatWindow = document.getElementById('privateChat');
            const overlay = document.getElementById('privateChatOverlay');
            
            if (privateChatWindow && overlay) {
                privateChatWindow.style.display = 'none';
                overlay.style.display = 'none';
                currentPrivateChatTarget = null;
            }
        }

        // 添加在线用户列表切换功能
        function toggleUserList() {
            const userList = document.querySelector('.online-users');
            if (window.innerWidth <= 768) {
                // 移动端：切换显示/隐藏
                userList.classList.toggle('show');
            } else {
                // 电脑端：切换宽度
                userList.classList.toggle('hidden');
                document.querySelector('.chat-messages').classList.toggle('full-width');
            }
        }

        function toggleFullscreen() {
            const chatContainer = document.getElementById('chatArea');
            chatContainer.classList.toggle('fullscreen');
            const fullscreenText = document.getElementById('fullscreenText');
            fullscreenText.textContent = chatContainer.classList.contains('fullscreen') ? '退出全屏' : '切换全屏';
        }

        // 添加加载状态控制函数
        function showLoading() {
            const loadingContainer = document.querySelector('.loading-container');
            loadingContainer.classList.add('show');
        }

        function hideLoading() {
            const loadingContainer = document.querySelector('.loading-container');
            loadingContainer.classList.remove('show');
        }

        // 添加通知功能
        function showNotification(title, body) {
            // 检查浏览器是否支持通知
            if (!("Notification" in window)) {
                console.log("此浏览器不支持通知");
                return;
            }
            
            // 检查通知权限
            if (Notification.permission === "granted") {
                createNotification(title, body);
            } else if (Notification.permission !== "denied") {
                Notification.requestPermission().then(function (permission) {
                    if (permission === "granted") {
                        createNotification(title, body);
                    }
                });
            }
        }

        function createNotification(title, body) {
            const notification = new Notification(title, {
                body: body,
                icon: '/static/logo.png',  // 如果有图标的话
                tag: 'chat-notification'
            });
            
            notification.onclick = function() {
                window.focus();
                this.close();
            };
            
            // 4秒后自动关闭
            setTimeout(notification.close.bind(notification), 4000);
        }

        // 在页面加载时请求通知权限
        document.addEventListener('DOMContentLoaded', function() {
            if ("Notification" in window && Notification.permission !== "granted") {
                Notification.requestPermission();
            }
        });

        // 添加声音控制
        let soundEnabled = true;

        function toggleSound() {
            soundEnabled = !soundEnabled;
            const soundButton = document.querySelector('.sound-toggle');
            soundButton.innerHTML = soundEnabled ? '🔊' : '🔇';
            localStorage.setItem('soundEnabled', soundEnabled);
        }

        function playMessageSound() {
            if (!soundEnabled) return;
            
            const now = Date.now();
            if (now - lastMessageTime > sToMs(1)) {  // 1秒内不重复播放
                messageSound.play().catch(e => console.log('播放提示音失败:', e));
                lastMessageTime = now;
            }
        }

        // 初始化声音设置
        document.addEventListener('DOMContentLoaded', function() {
            soundEnabled = localStorage.getItem('soundEnabled') !== 'false';
            const soundButton = document.querySelector('.sound-toggle');
            if (soundButton) {
                soundButton.innerHTML = soundEnabled ? '🔊' : '🔇';
            }
        });

        // 登录表单事件处理
        document.getElementById('loginUsername').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('loginPassword').focus();
            }
        });

        document.getElementById('loginPassword').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                login();
            }
        });

        // 注册表单事件处理
        document.getElementById('registerUsername').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('registerPassword').focus();
            }
        });

        document.getElementById('registerPassword').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('confirmPassword').focus();
            }
        });

        document.getElementById('confirmPassword').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                register();
            }
        });

        function showError(formId, message) {
            const errorDiv = document.getElementById(formId + 'Error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            setTimeout(() => {
                errorDiv.style.opacity = '1';
            }, 10);
        }

        function clearError(formId) {
            const errorDiv = document.getElementById(formId + 'Error');
            errorDiv.style.opacity = '0';
            setTimeout(() => {
                errorDiv.style.display = 'none';
                errorDiv.textContent = '';
            }, 300);
        }

        function validateLoginForm() {
            const username = document.getElementById('loginUsername').value.trim();
            const password = document.getElementById('loginPassword').value.trim();
            
            if (!username) {
                showError('login', '请输入用户名');
                return false;
            }
            if (!password) {
                showError('login', '请输入密码');
                return false;
            }
            return true;
        }

        function validateRegisterForm() {
            const username = document.getElementById('registerUsername').value.trim();
            const password = document.getElementById('registerPassword').value.trim();
            const confirmPassword = document.getElementById('confirmPassword').value.trim();
            
            if (!username) {
                showError('register', '请输入用户名');
                return false;
            }
            if (username.length < 3) {
                showError('register', '用户名至少需要3个字符');
                return false;
            }
            if (!password) {
                showError('register', '请输入密码');
                return false;
            }
            if (password.length < 6) {
                showError('register', '密码至少需要6个字符');
                return false;
            }
            if (password !== confirmPassword) {
                showError('register', '两次输入的密码不一致');
                return false;
            }
            return true;
        }
    </script>
</body>
</html> 